<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../common/jspcommon.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@include file="../common/meta.jsp" %>
<title>新建编辑画报  - 果果街</title>
<%@include file="../common/jscss.jsp" %>
</head>
<body>
<%@include file="../common/header.jsp" %>
<div class="wraper">
	
	<div class="commonWraper">
    	<div class="commonHeaderBg">
        	<img src="imgs/cornerlt_content.png" title="" class="commonLeftTopBg" />
            <img src="imgs/corner_content.png" title="" class="commonRightTopBg" />
        </div>
        
        <div class="ablumContentWraper">
        	<div class="ablumBox">
        	<c:if test="${editDp != null}">
        		<h3>编辑画报</h3>
        	</c:if>
        	<c:if test="${editDp == null}">
        		<h3>创建新画报</h3>
        	</c:if>
           	  
                <p class="ablumStyleP"><span>标题：</span><input name="title" id="pic_title" type="text" value="${editDp.title}" class="ablumTitle" /><em>&nbsp;最多20个字</em></p>
                
                <c:if test="${bonusPT == null}">
                	<p class="ablumSort"><span>分类：</span>
	                <span class="createSpan" title="晒网购单品享购物心得"><input type="radio" name="picType" <c:if test="${editDp.type=='01'}">checked</c:if> value="01"/><i>晒货</i></span>
	                <span class="createSpan" title="搞怪宝贝表情秀"><input type="radio" name="picType" <c:if test="${editDp.type=='02'}">checked</c:if> value="02"/><i>搞怪</i></span>
	                <span class="createSpan" title="晒宝宝艺术照"><input type="radio" name="picType" <c:if test="${editDp.type=='04'}">checked</c:if> value="04"/><i>麻豆</i></span>
	                <span class="createSpan" title="成长生活记录"><input type="radio" name="picType" <c:if test="${editDp.type=='05'}">checked</c:if> value="05"/><i>生活</i></span>
	                <span class="createSpan" title="其它"><input type="radio" name="picType" <c:if test="${editDp.type=='06'}">checked</c:if> value="06"/><i>其它</i></span>
	                </p>
                </c:if>
                <c:if test="${bonusPT != null}">
                	<input type="radio" name="picType" value="03" checked="checked" style="display: none;"/>
                </c:if>
                
              <p class="ablumStyleP pStyleHeight"><span>画报介绍：</span>
           	    <textarea name="textarea" id="textarea_content"><c:out value="${editDp.description}" /></textarea>
           	  <em id="pic_can_length">&nbsp;还能输入 <font size="3" id="remain">200</font> 字</em></p>
           	  <div class="chooseZT_y clearfix">
           		<span>主题：</span>
           		<div class="alchooseZT_y clearfix" id="joined_topic">
           			<c:if test="${bonusPT != null}">
           				<a href="javascript:;" topicId="${bonusPT.identifier}" id="joined_topic_${bonusPT.identifier}" class="redColor" style="padding-right: 7px;"><c:out value="${bonusPT.name}"/></a>
           			</c:if>
           			<c:choose>
           				<c:when test="${editDp != null && isBonus}">
           					<c:forEach items="${ptListed}" var="pted">
			               		<a href="javascript:;" topicId="${pted.identifier}" id="joined_topic_${pted.identifier}"  class="redColor" style="padding-right: 7px;"><c:out value="${pted.name}"/></a>
			               </c:forEach>
           				</c:when>
           				<c:otherwise>
           					<c:forEach items="${ptListed}" var="pted">
			               		<a href="javascript:;" topicId="${pted.identifier}" id="joined_topic_${pted.identifier}" onclick="removeTopic('${pted.identifier}');" class="redColor"><c:out value="${pted.name}"/><img src="imgs/tcZTPic01.png" /></a>
			               </c:forEach> 
           				</c:otherwise>
           			</c:choose>
                                       
                 </div>
                 <c:if test="${bonusPT == null && !isBonus}">
	                 <div class="noChooseZT_y clearfix">
	                 	 <c:forEach items="${ptListedNoLock}" var="pt">
		               			<c:choose>
		               				<c:when test="${pt.isLock}">
		               					<a href="javascript:;" id="join_topic_list_${pt.identifier}"  class="clickStyle_y"  topicName='<c:out value="${pt.name}" />'>+ <c:out value="${pt.name}" /></a>
		               				</c:when>
		               				<c:when test="${pt.type=='01'}">
		               					<a href="javascript:;" id="join_topic_list_${pt.identifier}" onclick="joinTopicList('${pt.identifier}');" class="redColor"  topicName='<c:out value="${pt.name}" />'>+ <c:out value="${pt.name}" /></a>
		               				</c:when>
		               			</c:choose>
		               		
		               	</c:forEach>
	                 </div>
                 </c:if>
              </div>
              <div class="clear"></div>
                <p>
                  <input type="button" class="ablumButtonStyle" style="cursor: pointer;" value=" " id="submit_pictorial"/>
                </p>
        	</div>
        </div>
        
        
        
        <div class="commonBottomBg">
        	<img src="imgs/cornerlb.png" title="" class="commonLeftBottomBg" />
            <img src="imgs/cornerrb.png" title="" class="commonRightBottomBg" />
        </div>
    </div>
	<div class="clear"></div>
	<%@include file="../common/footer.jsp" %>
</div>
<script type="text/javascript">
	$(function(){
		$("#textarea_content").keyup(function(){
			GUOGUO.remain('textarea_content','pic_can_length',200);
		}).keydown(function(){
			GUOGUO.remain('textarea_content','pic_can_length',200);
		});
		
		$("#submit_pictorial").click(function(){
			submitPictorial();
		});
	});
	
	function submitPictorial(){
		var title = $("#pic_title").val();
		if(IsNull(title)){
			alert("请输入画报标题");
			return ;
		}
		var picType = $(":radio[name='picType'][checked]").val();
		if(IsNull(picType)){
			alert("请选择分类");
			return ;
		}
		var description = $("#textarea_content").val();
		if(description.length > 200){
			alert("画报介绍不能多于200字");
			return ;
		}
		
		$("#submit_pictorial").unbind("click");
		//画报主题
		var pictorialTopic = "";
		var i = 0;
		$("#joined_topic a").each(function(){
			var topicId = $(this).attr("topicId");
			if(i!=0){
				pictorialTopic+=",";
			}
			pictorialTopic+=topicId;
			i++;
		});
		$.post("savePictorial.htm",{
			identifier : '${editDp.identifier}',
			title:title,
			type : picType,
			description : description,
			pictorialTopic : pictorialTopic
		},function(data){
			$("#submit_pictorial").click(function(){
				submitPictorial();
			});
			if(data == 'success'){
				window.location.href = "pictorial.htm?family=${member.family}";
			}else if(data=='noRight'){
				alert("该画报不属于你的");
			}else{
				alert("未知错误");
			}
		});
	}
	//添加主题
	function addPictorialTopic(self){
		var content = $("#pictorial_topic").val();
		var contentId = $("#pictorial_topic_id").val();
		$("#pictorial_topic").val(content+$(self).html());
		if(content != ""){
			$("#pictorial_topic").val(content+","+$(self).html());
			$("#pictorial_topic_id").val(contentId+","+$(self).attr("lang"));
		}else{
			$("#pictorial_topic").val(content+$(self).html());
			$("#pictorial_topic_id").val(contentId+$(self).attr("lang"));
		}
	}
	
	function removeTopic(topicId){
		$("#join_topic_list_"+topicId).show().attr("class","redColor").unbind("click").attr("onclick","").bind("click",function(){
			joinTopicList(topicId);
		});
		$("#joined_topic_"+topicId).remove();
	}
	function joinTopicList(topicId){
		if($("#joined_topic a").size() > 0){
			alert("只能加入一个主题！");
		}else{
			var topicName = $("#join_topic_list_"+topicId).attr("topicName");
			var html = $('<a href="javascript:;" topicId="'+topicId+'" id="joined_topic_'+topicId+'" onclick=removeTopic("'+topicId+'") class="redColor">'+topicName+'<img src="imgs/tcZTPic01.png"></a>');
			$("#joined_topic").append(html);
			
			$("#join_topic_list_"+topicId).attr("class","clickStyle_y").attr("onclick","").unbind("click").hide();
		}
	}
</script>
</body>
</html>
